<template>
  <div id="nav">
    <header>
      <div class="headerTop">
        <span class="headerLogo fl"></span>
        <div class="headerTopMid fl">
          <span class="search-icon"></span>
          <input type="" name="" value="" class="headerTopInput fl" placeholder="搜索课程" />
          <span class="blue-enter-search">搜索</span>
        </div>
        <div class="headerTopRight fr">
          <div szie="small" class="el-dropdown" data-v-5761c34a="">
            <div class="headerTopRightspan headerTopRightCur">
              <span data-v-5761c34a="">北京</span>
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <a target="_blank" href="#" class="enter-cooperation">入驻/合作</a>
        </div>
      </div>
      <div class="headerNavs">
        <div class="headerWrap">
          <div class="headerNavleft">
            <router-link to="/home" :class="['headerNav', isActive == 1 ? 'active' : '']"
              @click.native="handleActive(1)">首页</router-link>
            <router-link to="/selectCourse" :class="['headerNav', isActive == 2 ? 'active' : '']"
              @click.native="handleActive(2)">选课中心</router-link>
            <router-link to="/train" :class="['headerNav', isActive == 3 ? 'active' : '']"
              @click.native="handleActive(3)">企业培训</router-link>
            <router-link to="/exam" :class="['headerNav', isActive == 4 ? 'active' : '']"
              @click.native="handleActive(4)">考试认证</router-link>
            <!-- <router-link to="/home" :class="['headerNav', isActive == 5 ? 'active' : '']"
              @click.native="handleActive(5)">关于瑞通</router-link> -->
          </div>
          <div class="headerNavRight">
            <div class="golearnt">我的瑞通</div>
            <img src="../assets/img/nPhone.png" alt="" class="userInfoImg" />
          </div>
        </div>
      </div>
    </header>
    <section>
      <router-view></router-view>
      <footer>
        <!-- <div class="footerUp">
          <div class="footerUpConter">
            <div class="footerLeft">
              <div class="footerEachNav">
                <a href="#" class="head color">联系我们</a>
                <a href="#" class="color">教室出租</a>
                <a href="#" class="color">企业邮箱</a>
                <a href="#" class="color">在线客服</a>
                <a href="#" class="color">客服热线</a>
                <a href="#" class="color">公共邮箱</a>
              </div>
              <div class="footerEachNav">
                <a href="#" class="head color">我的瑞通</a>
                <a href="#" class="color">绑定VIP</a>
                <a href="#" class="color">在线预习/复习</a>
              </div>
              <div class="footerEachNav">
                <a href="#" class="head color">关于瑞通</a>
                <a href="#" class="color">公司简介</a>
                <a href="#" class="color">荣誉资质</a>
                <a href="#" class="color">加入我们</a>
                <a href="#" class="color">常见问题</a>
                <a href="#" class="color">改进意见</a>
              </div>
              <div class="footerEachNav">
                <a href="#" class="head color">友情链接</a>
                <a href="#" class="color">PMP项目管理</a>
                <a href="#" class="color">cisp认证</a>
                <a href="#" class="color">软考培训</a>
                <a href="#" class="color">华为数通</a>
              </div>
            </div>
            <div class="footerRight">
              <div class="qrcode">
                <img src="../assets/img/QRcode3.fb28078.png" alt="" />
                <div class="qrcodeTit">官方公众号</div>
              </div>
              <div class="qrcode">
                <img src="../assets/img/QRcode6.728f079.png" alt="" />
                <div class="qrcodeTit">东方瑞通APP</div>
              </div>
              <div class="qrcode">
                <img src="../assets/img/xinchuangCode.dab4e88.png" alt="" />
                <div class="qrcodeTit">信创交流群</div>
              </div>
            </div>
          </div>
        </div> -->
        <div class="footerDown">
          <div class="footerUpConter1 top">
            <div class="neFooterP">
              PMI, PMP, Project Management Professional, CAPM, PgMP, PfMP, PMI-ACP,
              PMI-RMP, PMI-SP, PMI-PBA and PMBOK are registered marks of the Project
              Management Institute, Inc.
            </div>
            <div class="neFooterP">
              ITIL<sup>®</sup> is a registered trade mark of AXELOS Limited, used under
              permission of AXELOS Limited. All rights reserved.
            </div>
            <div class="neFooterP">
              PRINCE2<sup>®</sup> is a registered trade mark of AXELOS Limited, used under
              permission of AXELOS Limited. All rights reserved.
            </div>
            <div class="neFooterP">
              COBIT<sup>®</sup> is a trademark of ISACA<sup>®</sup> registered in the
              United States and other countries.
            </div>
            <div class="neFooterP">
              TOGAF<sup>®</sup> is a registered trademark of The Open Group.
            </div>
            <div class="neFooterP">
              Copyright<sup>©</sup> 2006-2020 东方瑞通（北京）咨询服务有限公司版权所有
            </div>
            <div class="neFooterP">
              <a target="_blank" href="http://beian.miit.gov.cn">京ICP备 13009094号-4</a>
              <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031185"><img
                  src="http://www.beian.gov.cn/img/new/gongan.png" alt="" />
                京公网安备 11010802031185号</a>
            </div>
          </div>
        </div>
      </footer>
    </section>
    <div class="consult">
      <div class="consultD">
        <div class="consultDP1">
          <p></p>
          <a class="text">咨询</a>
        </div>
        <div class="bottom-area-background">
          <div class="consultDP20">
            <span><span class="el-popover__reference-wrapper">
                <div class="el-popover__reference" aria-describedby="el-popover-7557" tabindex="0">
                  <p></p>
                  <a class="text">电话</a>
                </div>
              </span></span>
          </div>
          <div class="consultDP13">
            <span><span class="el-popover__reference-wrapper">
                <div class="el-popover__reference" aria-describedby="el-popover-1349" tabindex="0">
                  <p></p>
                  <a class="text">App</a>
                </div>
              </span></span>
          </div>
          <div class="consultDP9">
            <span><span class="el-popover__reference-wrapper">
                <div class="el-popover__reference" aria-describedby="el-popover-7245" tabindex="0">
                  <p></p>
                  <a class="text">公众号</a>
                </div>
              </span></span>
          </div>
          <div class="consultDP6">
            <p></p>
            <a class="text">购物车</a>
          </div>
        </div>
        <!---->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navPage",
  components: {},
  data() {
    return {
      isActive: 1,
    };
  },
  methods: {
    handleActive(count) {
      this.isActive = count;
    },
  },
};
</script>

<style scoped lang="less">
#nav {
  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  a,
  a:link {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

  a,
  input {
    border: 0;
  }

  header {
    width: 100%;
    background-color: #fff;
    height: 108px;
    padding: 10px 0 0;
    z-index: 100;
    box-shadow: 0 8px 16px rgba(55, 99, 170, 0.1);
    position: fixed;
    top: 0;
    width: 100%;

    .headerTop {
      margin: 0 auto;
      width: 1200px;

      // overflow: hidden;
      .headerLogo {
        background: url("../assets/img/rt_logo.16a270e.png") no-repeat;
        background-size: contain;
        height: 39px;
        transform: translateY(10px);
        width: 226px;
      }

      .headerTopMid {
        border: 1px solid #f45f16;
        border-radius: 8px;
        height: 40px;
        margin: 0 0 0 213px;
        position: relative;
        width: 470px;
        display: flex;
        align-items: center;

        .search-icon {
          background: url("../assets//img/search.c8e72fe.png") no-repeat 50%;
          background-size: contain;
          height: 21px;
          left: 6px;
          position: absolute;
          top: 8px;
          width: 21px;
          z-index: 1;
        }

        .headerTopInput {
          margin-left: 24px;
          width: 360px;
          display: inline-block;
          vertical-align: top;
          height: 32px;
          background: #f7f8fc;
          outline: none;
          border: none;
          text-indent: 2em;
        }

        .blue-enter-search {
          background-color: #f45f16;
          border-radius: 8px;
          color: #fff;
          cursor: pointer;
          height: 32px;
          line-height: 32px;
          position: absolute;
          right: 2px;
          text-align: center;
          top: 3px;
          width: 60px;
        }
      }

      .headerTopRight {
        line-height: 22px;
        padding: 10px 0 0;
        display: flex;
        align-items: center;

        .enter-cooperation {
          color: #333;
          cursor: pointer;
          margin-left: 21px;
        }

        .headerTopRightCur {
          cursor: pointer;
        }

        .headerTopRightspan {
          span {
            display: inline-block;
            font-size: 16px;
            line-height: 20px;
            vertical-align: top;
          }
        }
      }
    }

    .headerNavs {
      height: 54px;
      margin: 4px 0 0;

      .headerWrap {
        margin: 0 auto;
        width: 1200px;
        display: flex;
        align-items: center;

        .headerNavleft {
          width: 85%;

          .headerNav {
            cursor: pointer;
            display: inline-block;
            line-height: 54px;
            margin-right: 56px;
            position: relative;
            vertical-align: top;
            color: #000;
          }

          .active {
            font: bolder;
            font-weight: 700;
          }

          .active:after {
            background-color: #f45f16; 
            border-radius: 2px;
            bottom: 6px;
            content: "";
            height: 4px;
            left: 50%;
            position: absolute;
            transform: translateX(-14px);
            width: 28px;
          }
        }

        .headerNavRight {
          width: 15%;
          display: flex;
          align-items: center;
          justify-content: center;

          .golearnt {
            cursor: pointer;
            font-size: 14px;
            margin-right: 16px;
          }

          .userInfoImg {
            border: 2px solid #fff;
            border-radius: 50%;
            height: 40px;
            transform: translateY(-4px);
            vertical-align: top;
            width: 40px;
          }
        }
      }
    }
  }

  section {
    width: 100%;
    padding-top: 140px;

    footer {
      .footerUp {
        background-color: #424242;
        overflow: hidden;
        width: 100%;

        .footerUpConter {
          margin: 0 auto;
          overflow: hidden;
          width: 1200px;
          padding-bottom: 20px;

          .footerLeft {
            float: left;
            margin-top: 80px;

            .footerEachNav {
              cursor: pointer;
              line-height: 28px;

              .head {
                color: #fff;
                font-size: 15px;
                font-weight: 700;
                margin-right: 15px;
              }

              .color {
                color: #fff;
                margin-right: 15px;
              }
            }
          }

          .footerRight {
            float: right;
            margin-top: 40px;

            .qrcode {
              color: #f1f1f1;
              display: inline-block;
              margin-left: 30px;
              text-align: center;

              img {
                height: 138px;
                width: 138px;
              }

              .qrcodeTit {
                margin-top: 10px;
                color: #f1f1f1;
              }
            }
          }
        }
      }

      .footerDown {
        background: #3a3a3a;
        width: 100%;

        .footerUpConter1 {
          margin: 0 auto;
          width: 1200px;
          padding: 20px 0;

          .neFooterP {
            color: #b4b4b4;
            font-size: 12px;
            text-align: center;
          }
        }
      }
    }
  }
}

.consult {
  bottom: 0;
  cursor: pointer;
  height: 536px;
  overflow: hidden;
  position: fixed;
  left: 8px;
  top: 22%;
  width: 70px;
  z-index: 9999;

  .consultD {
    a {
      color: #8e97a9;
      font-size: 14px;
    }

    div {
      position: relative;

      p {
        background-size: contain;
        height: 44px;
        margin: 0 auto;
        width: 44px;
      }
    }

    .consultDP1 {
      // background: url(../assets/img/sidebar9.9724fac.png) no-repeat 50%;
      // background-size: contain;
      background-color: #f45f16;
      height: 108px;
      width: 70px;
      border-radius: 50px;

      a {
        color: #fff;
        position: absolute;
        text-align: center;
        top: 67px;
        width: 70px;
        font-size: 14px;
      }

      p {
        background: url(../assets/img/sidebar10.344ec29.png) no-repeat 50%;
        background-size: cover;
        left: 14px;
        position: absolute;
        top: 20px;
      }
    }

    .bottom-area-background {
      background: url(../assets/img/sidebar3.6240387.png) no-repeat 50%;
      height: 346px;
      padding-top: 16px;
      transform: translateY(-16px);
      width: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .consultDP13,
      .consultDP20,
      .consultDP6,
      .consultDP9 {
        height: 75px;
        margin: 0 auto;
        position: relative;
        text-align: center;
        width: 70px;

        p {
          background-color: red;
        }
      }

      .consultDP20 p {
        background: url(../assets/img/sidebar4.ef1729a.png) no-repeat 100%;
        background-size: cover;
      }

      .consultDP13 p {
        background: url('../assets/img/phone.png') no-repeat 100%;
        background-size: cover;
      }

      .consultDP9 p {
        background: url(../assets/img/sidebar5.9d8f66c.png) no-repeat 100%;
        background-size: cover;
      }

      .consultDP6 p {
        background: url(../assets/img/sidebar15.a058b83.png) no-repeat 100%;
        background-size: cover;
      }
    }
  }

}
</style>
